<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Title</title>
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    />
    <style>
        .red {
            color: red !important;
        }

        .search {
            width: 300px;
            margin: 20px 0;
        }

        .my-form {
            display: flex;
            margin: 20px 0;
        }

        .my-form input {
            flex: 1;
            margin-right: 20px;
        }

        .table > :not(:first-child) {
            border-top: none;
        }

        .contain {
            display: flex;
            padding: 10px;
        }

        .list-box {
            flex: 1;
            padding: 0 30px;
        }

        .list-box a {
            text-decoration: none;
        }

        .echarts-box {
            width: 600px;
            height: 400px;
            padding: 30px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }

        tfoot {
            font-weight: bold;
        }

        @media screen and (max-width: 1000px) {
            .contain {
                flex-wrap: wrap;
            }

            .list-box {
                width: 100%;
            }

            .echarts-box {
                margin-top: 30px;
            }
        }
    </style>
</head>
<body>

<div id="app">
    <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">

            <!-- 添加资产 -->
            <form class="my-form">
                <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称"/>
                <input v-model.number="price" type="text" class="form-control" placeholder="消费价格"/>
                <button @click="add" type="button" class="btn btn-primary">添加账单</button>
            </form>

            <table class="table table-hover">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>消费名称</th>
                    <th>消费价格</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in list" :key="item.id">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.name }}</td>
                    <td :class="{ red: item.price > 500 }">{{ item.price.toFixed(2) }}</td>
                    <td><a @click="del(item.id)" href="javascript:">删除</a></td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}</td>
                </tr>
                </tfoot>
            </table>
        </div>

        <!-- 右侧图表 -->
        <div class="echarts-box" id="main"></div>
    </div>
</div>

<script src="../vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    /**
     * 接口文档地址：
     * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
     *
     * 功能需求：
     * 1. 基本渲染
     *    (1) 立刻发送请求获取数据 created
     *    (2) 拿到数据，存到data的响应式数据中
     *    (3) 结合数据，进行渲染 v-for
     *    (4) 消费统计 => 计算属性
     * 2. 添加功能
     *    (1) 收集表单数据 v-model
     *    (2) 给添加按钮注册点击事件，发送添加请求
     *    (3) 需要重新渲染
     * 3. 删除功能
     *    (1) 注册点击事件，传参传 id
     *    (2) 根据 id 发送删除请求
     *    (3) 需要重新渲染
     * 4. 饼图渲染
     *    (1) 初始化一个饼图 echarts.init(dom)  mounted钩子实现
     *    (2) 根据数据实时更新饼图 echarts.setOption({ ... })
     */
    const {createApp, ref, computed, onMounted} = Vue;
    createApp({
        setup() {
            // 定义响应式数据 list，用于存储账单数据
            const list = ref([]);
            const name = ref('');
            const price = ref(0);
            let myChart = ref(null);

            onMounted(() => {
                getList();

                myChart = echarts.init(document.getElementById('main'));
                myChart.setOption({
                    // 标题
                    title: {
                        text: '消费账单列表',
                        left: 'center'
                    },
                    // 提示框
                    tooltip: {
                        trigger: 'item'
                    },
                    // 图例
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '消费账单',
                            type: 'pie',
                            radius: '50%',
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            });

            // 在组件挂载时，通过 axios 异步请求从 API 获取账单数据，并将数据赋值给 list，async和await关键字实现异步请求
            const getList = (async () => {
                const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
                    params: {
                        creator: '小黑子'
                    }
                });
                // 将获取到的数据赋值给 list
                list.value = res.data.data;

                // 更新图表
                myChart.setOption({
                    // 数据项
                    series: [{data: list.value.map(item => ({value: item.price, name: item.name}))}]
                })
            });

            const add = (async () => {
                if (!name.value || typeof price.value !== 'number' || price.value < 0) {
                    return alert('请输入正确的消费名称和价格');
                }

                const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {
                    creator: '小黑子',
                    name: name.value,
                    price: price.value
                });
                // 重新获取账单数据
                await getList();
                // 添加成功，重置表单
                name.value = '';
                price.value = 0;

            });

            // 删除功能,参数在 del() 方法中，通过点击事件传参传 id，id在链接中获取
            const del = (async (id) => {
                const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`);
                // 重新获取账单数据
                await getList();
            });

            // 计算属性 totalPrice，用于计算账单总价
            const totalPrice = computed(() => {
                return list.value.reduce((total, item) => total + item.price, 0);
            });

            // 返回需要在模板中使用的数据和计算属性
            return {list, name, price, add, del, getList, totalPrice};
        }
    }).mount('#app');
</script>

</body>
</html>